<template>
    <div class="login clearfix">
      <div class="login-wrap">
        <el-row type="flex" justify="center">
          <el-form ref="loginForm" :model="user" status-icon label-width="80px">
            <h3>注册</h3>
            <hr>
            <el-form-item prop="username" label="用户名">
              <el-input v-model="user.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item prop="email" label="邮箱">
              <el-input v-model="user.email" placeholder="请输入邮箱"></el-input>
              <el-button v-if="mailSend" type="primary" size="mini" class="codeBtn" @click="getCode">获取验证码</el-button>
              <el-button v-else type="info" size="mini" class="codeBtn" @click="checkSend" >已发送[{{count}}]</el-button>
            </el-form-item>
            <el-form-item prop="code" label="验证码">
              <el-input v-model="user.code" placeholder="请输入验证码"></el-input>
            </el-form-item>
            <el-form-item prop="password" label="设置密码">
              <el-input v-model="user.password" show-password placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item prop="pwd" label="确认密码">
              <el-input v-model="pwd" show-password placeholder="请确认密码"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon @click="doRegister">注册账号</el-button>
            </el-form-item>
          </el-form>
        </el-row>
      </div>
    </div>
  </template>
   
  <script>
import { sendHtmlMailMessage } from "@/api/mail";
import { register } from "@/api/user";
export default {
  name: "register",
  data() {
    return {
      user: {
        username: "",
        email: "",
        password: "",
        code: "",
      },
      mailSend: true,
      pwd: "",
      count: "",
      timer: null,
    };
  },
  created() {},
  methods: {
    getCode() {
      let _this = this;
      if (this.user.email != null) {
        var reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        if (!reg.test(this.user.email)) {
          return this.$message.error("请输入有效的邮箱！");
        }
      }

      const TIME_COUNT = 60;
      this.mailSend = false;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.mailSended = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.mailSend = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
      sendHtmlMailMessage(this.user.email).then(res => {
        if (res.code != 200) {
          return _this.$message({ type: "warning", message: res.msg });
        }
        this.$message.success("发送成功！");
      });
      // axios({
      //   method: "post",
      //   url: "http://localhost:8088/mail/sendHtmlMailMessage",
      //   params: {
      //     to: _this.user.email,
      //   },
      //   headers: {
      //     "Content-Type": "application/json;charset=UTF-8",
      //   },
      // }).then(res => {
      //   if (res.data.code === 200) {
      //     this.$message.success("发送成功！");
      //   } else {
      //     this.$message.error(res.data.msg);
      //   }
      // });
    },
    checkSend() {
      this.$message.info("请耐心等待...");
    },
    doRegister() {
      let _this = this;
      if (!this.user.username) {
        this.$message.error("请输入用户名！");
        return;
      } else if (!this.user.code) {
        this.$message.error("请输入验证码！");
        return;
      } else if (!this.user.password) {
        this.$message.error("请输入密码！");
        return;
      } else if (!this.pwd) {
        this.$message.error("请确认密码！");
        return;
      } else if (!this.user.email) {
        this.$message.error("请输入邮箱！");
        return;
      } else if (this.user.email != null) {
        var reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        if (!reg.test(this.user.email)) {
          this.$message.error("请输入有效的邮箱！");
        } else if (!this.user.password) {
          this.$message.error("请输入密码！");
          return;
        } else if (
          this.user.password &&
          this.pwd &&
          this.user.password != this.pwd
        ) {
          this.$message.error("密码不一致！");
          return;
        } else {
          let _this = this;
          register(_this.user).then(res => {
            if (res.code != 200) {
              return _this.$message({ type: "warning", message: res.msg });
            }
            _this.$message.success("注册成功！");
            _this.$router.push({ path: "/login" });
          });
          // axios({
          //   method: "post",
          //   url: "http://localhost:8088/user/register",
          //   data: _this.user,
          //   headers: {
          //     "Content-Type": "application/json;charset=UTF-8",
          //   },
          // }).then(res => {
          //   if (res.data.code === 200) {
          //     _this.$message.success("注册成功！");
          //     _this.$router.push({ path: "/login" });
          //   } else {
          //     _this.$message.error(res.data.msg);
          //   }
          // });
        }
      }
    },
  },
};
</script>
   
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
.login {
  width: 100%;
  height: 740px;

  background-size: cover;
  overflow: hidden;
}
.login-wrap {
  background: white;
  background-size: cover;
  width: 400px;
  height: 490px;
  border-radius: 20px;
  padding: 2px;
  margin: 215px auto;
  overflow: hidden;
  padding-top: 10px;
  line-height: 20px;
}

h3 {
  margin-top: 10px;
  color: #0babeab8;
  font-size: 24px;
}
hr {
  background-color: #444;
  margin: 20px auto;
}
.codeBtn {
  width: 50px;
  height: 30px;
}
.el-button {
  width: 80%;
  margin-left: -50px;
}
</style>